การใช้งาน experimental_useSubscription ของ React สำหรับข้อมูลภายนอก: คู่มือฉบับสมบูรณ์

React ซึ่งเป็นไลบรารี JavaScript ที่ใช้กันอย่างแพร่หลายสำหรับการสร้างส่วนติดต่อผู้ใช้ (user interfaces) มีการพัฒนาอย่างต่อเนื่อง หนึ่งในส่วนเพิ่มเติมล่าสุดที่ยังอยู่ในช่วงทดลองคือ experimental_useSubscription API เครื่องมืออันทรงพลังนี้มอบวิธีที่มีประสิทธิภาพและเป็นมาตรฐานมากขึ้นในการจัดการการสมัครรับข้อมูลจากแหล่งข้อมูลภายนอกโดยตรงภายในคอมโพเนนต์ React ของคุณ คู่มือนี้จะเจาะลึกรายละเอียดของ experimental_useSubscription สำรวจประโยชน์ของมัน และให้ตัวอย่างที่นำไปใช้ได้จริงเพื่อช่วยให้คุณสามารถนำไปปรับใช้ในโปรเจกต์ของคุณได้อย่างมีประสิทธิภาพ

ทำความเข้าใจความจำเป็นของการสมัครรับข้อมูล

ก่อนที่จะลงลึกในรายละเอียดของ experimental_useSubscription สิ่งสำคัญคือต้องเข้าใจปัญหาสที่มันพยายามจะแก้ไข แอปพลิเคชันเว็บสมัยใหม่มักจะอาศัยข้อมูลจากแหล่งข้อมูลภายนอกต่างๆ เช่น:

• ฐานข้อมูล: การดึงและแสดงข้อมูลจากฐานข้อมูล เช่น PostgreSQL, MongoDB หรือ MySQL
• Real-time APIs: การรับอัปเดตจาก API แบบเรียลไทม์โดยใช้เทคโนโลยีเช่น WebSockets หรือ Server-Sent Events (SSE) ลองนึกถึงราคาหุ้น, ผลกีฬาสด หรือการแก้ไขเอกสารร่วมกัน
• ไลบรารีการจัดการสถานะ: การผสานรวมกับโซลูชันการจัดการสถานะภายนอก เช่น Redux, Zustand หรือ Jotai
• ไลบรารีอื่นๆ: ข้อมูลที่เปลี่ยนแปลงนอกเหนือจากกระบวนการ re-rendering ปกติของคอมโพเนนต์ React

โดยปกติแล้ว การจัดการการสมัครรับข้อมูลเหล่านี้ใน React มีหลายแนวทาง ซึ่งมักจะนำไปสู่โค้ดที่ซับซ้อนและอาจไม่มีประสิทธิภาพ รูปแบบที่ใช้กันทั่วไป ได้แก่:

• การสมัครรับข้อมูลด้วยตนเอง: การใช้ตรรกะการสมัครรับข้อมูลโดยตรงภายในคอมโพเนนต์โดยใช้ useEffect และจัดการวงจรชีวิตของการสมัครรับข้อมูลด้วยตนเอง ซึ่งอาจเกิดข้อผิดพลาดได้ง่ายและนำไปสู่การรั่วไหลของหน่วยความจำ (memory leaks) หากไม่จัดการอย่างระมัดระวัง
• Higher-Order Components (HOCs): การห่อหุ้มคอมโพเนนต์ด้วย HOCs เพื่อจัดการการสมัครรับข้อมูล แม้จะสามารถนำกลับมาใช้ใหม่ได้ แต่ HOCs อาจทำให้การประกอบคอมโพเนนต์ซับซ้อนและทำให้การดีบักยากขึ้น
• Render Props: การใช้ render props เพื่อแชร์ตรรกะการสมัครรับข้อมูลระหว่างคอมโพเนนต์ เช่นเดียวกับ HOCs, render props อาจทำให้โค้ดมีความยาวและซับซ้อนขึ้น

แนวทางเหล่านี้มักส่งผลให้เกิดโค้ดที่ซ้ำซ้อน (boilerplate code) การจัดการการสมัครรับข้อมูลด้วยตนเอง และปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้น experimental_useSubscription มีเป้าหมายเพื่อมอบโซลูชันที่คล่องตัวและมีประสิทธิภาพมากขึ้นสำหรับการจัดการการสมัครรับข้อมูลภายนอก

แนะนำ experimental_useSubscription

experimental_useSubscription คือ React hook ที่ออกแบบมาเพื่อทำให้กระบวนการสมัครรับข้อมูลจากแหล่งข้อมูลภายนอกง่ายขึ้น และทำการ re-render คอมโพเนนต์โดยอัตโนมัติเมื่อข้อมูลเปลี่ยนแปลง โดยพื้นฐานแล้ว มันเป็นกลไกที่มีมาให้ในตัวสำหรับการจัดการวงจรชีวิตของการสมัครรับข้อมูลและทำให้แน่ใจว่าคอมโพเนนต์จะสามารถเข้าถึงข้อมูลล่าสุดได้เสมอ

ประโยชน์หลักของ experimental_useSubscription

• การจัดการการสมัครรับข้อมูลที่ง่ายขึ้น: Hook นี้จะจัดการความซับซ้อนของการสมัครและยกเลิกการสมัครรับข้อมูลจากแหล่งข้อมูล ลดโค้ดที่ซ้ำซ้อนและข้อผิดพลาดที่อาจเกิดขึ้น
• การ Re-render อัตโนมัติ: คอมโพเนนต์จะ re-render โดยอัตโนมัติทุกครั้งที่ข้อมูลที่สมัครรับมีการเปลี่ยนแปลง ทำให้มั่นใจได้ว่า UI จะเป็นปัจจุบันอยู่เสมอ
• ประสิทธิภาพที่ดีขึ้น: React สามารถปรับปรุงการ re-render ให้เหมาะสมที่สุดโดยการเปรียบเทียบค่าข้อมูลก่อนหน้าและปัจจุบัน เพื่อป้องกันการอัปเดตที่ไม่จำเป็น
• โค้ดที่อ่านง่ายขึ้น: ลักษณะการเขียนโค้ดแบบประกาศ (declarative) ของ hook ทำให้โค้ดเข้าใจและบำรุงรักษาง่ายขึ้น
• ความสอดคล้องกัน: มอบแนวทางที่เป็นมาตรฐานและได้รับการอนุมัติจาก React สำหรับการสมัครรับข้อมูล ส่งเสริมความสอดคล้องกันในโปรเจกต์ต่างๆ

การทำงานของ experimental_useSubscription

hook experimental_useSubscription รับอาร์กิวเมนต์เดียวคือ อ็อบเจ็กต์ source อ็อบเจ็กต์ source นี้จำเป็นต้องมีอินเทอร์เฟซเฉพาะ (ตามที่อธิบายด้านล่าง) ที่ React ใช้เพื่อจัดการการสมัครรับข้อมูล

ความรับผิดชอบหลักของอ็อบเจ็กต์ source คือ:

1. Subscribe: ลงทะเบียนฟังก์ชัน callback ที่จะถูกเรียกใช้ทุกครั้งที่ข้อมูลมีการเปลี่ยนแปลง
2. Get Snapshot: ส่งคืนค่าปัจจุบันของข้อมูล
3. Compare Snapshots (optional): จัดเตรียมฟังก์ชันเพื่อเปรียบเทียบค่าข้อมูลปัจจุบันและก่อนหน้าอย่างมีประสิทธิภาพ เพื่อพิจารณาว่าจำเป็นต้อง re-render หรือไม่ สิ่งนี้มีความสำคัญอย่างยิ่งต่อการเพิ่มประสิทธิภาพ

อินเทอร์เฟซของอ็อบเจ็กต์ Source

อ็อบเจ็กต์ source ต้องมีเมธอดต่อไปนี้:

• subscribe(callback: () => void): () => void: เมธอดนี้จะถูกเรียกโดย React เมื่อคอมโพเนนต์ถูก mount (หรือเมื่อ hook ถูกเรียกครั้งแรก) โดยจะรับฟังก์ชัน callback เป็นอาร์กิวเมนต์ อ็อบเจ็กต์ source ควรลงทะเบียนฟังก์ชัน callback นี้เพื่อเรียกใช้ทุกครั้งที่ข้อมูลเปลี่ยนแปลง เมธอดนี้ควรคืนค่าฟังก์ชันสำหรับยกเลิกการสมัคร (unsubscribe function) React จะเรียกใช้ฟังก์ชัน unsubscribe นี้เมื่อคอมโพเนนต์ถูก unmount (หรือเมื่อ dependencies เปลี่ยนแปลง)
• getSnapshot(source: YourDataSourceType): YourDataType: เมธอดนี้จะถูกเรียกโดย React เพื่อรับค่าปัจจุบันของข้อมูล ควรคืนค่า snapshot ของข้อมูล อาร์กิวเมนต์ `source` (หากคุณเลือกที่จะใช้) คือแหล่งข้อมูลดั้งเดิมที่คุณส่งเข้ามาเมื่อสร้างอ็อบเจ็กต์ `Source` ของคุณ ซึ่งมีไว้เพื่อความสะดวกในการเข้าถึงแหล่งข้อมูลต้นทางจากภายใน `getSnapshot` และ `subscribe`
• areEqual(prev: YourDataType, next: YourDataType): boolean (optional): เมธอดนี้เป็นตัวเลือกเสริมเพื่อการปรับปรุงประสิทธิภาพ (optional optimization) หากมีให้ React จะเรียกเมธอดนี้เพื่อเปรียบเทียบค่าข้อมูลก่อนหน้าและปัจจุบัน หากเมธอดคืนค่า `true` React จะข้ามการ re-render คอมโพเนนต์ หากไม่มีให้ React จะทำการเปรียบเทียบแบบตื้น (shallow comparison) ของค่า snapshot ซึ่งอาจไม่เพียงพอเสมอไป ควรใช้เมธอดนี้หากคุณจัดการกับโครงสร้างข้อมูลที่ซับซ้อนซึ่งการเปรียบเทียบแบบตื้นอาจไม่สามารถสะท้อนการเปลี่ยนแปลงได้อย่างแม่นยำ นี่เป็นสิ่งสำคัญในการป้องกันการ re-render ที่ไม่จำเป็น

ตัวอย่างการใช้งาน experimental_useSubscription ในทางปฏิบัติ

เรามาดูตัวอย่างการใช้งานจริงเพื่อแสดงให้เห็นถึงวิธีการใช้ experimental_useSubscription กับแหล่งข้อมูลต่างๆ

ตัวอย่างที่ 1: การผสานรวมกับ Real-time API (WebSockets)

สมมติว่าคุณกำลังสร้างแอปพลิเคชันตัวติดตามหุ้นที่รับการอัปเดตราคาหุ้นแบบเรียลไทม์จาก WebSocket API

            
import React, { useState, useEffect } from 'react';
import { experimental_useSubscription as useSubscription } from 'react';

// Mock WebSocket implementation (replace with your actual WebSocket connection)
const createWebSocket = () => {
  let ws;
  let listeners = [];
  let currentValue = { price: 0 };

  const connect = () => {
    ws = new WebSocket('wss://your-websocket-api.com'); // Replace with your actual WebSocket URL

    ws.onopen = () => {
      console.log('Connected to WebSocket');
    };

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      currentValue = data;
      listeners.forEach(listener => listener());
    };

    ws.onclose = () => {
      console.log('Disconnected from WebSocket');
      setTimeout(connect, 1000); // Reconnect after 1 second
    };

    ws.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  };

  connect();

  return {
    subscribe: (listener) => {
      listeners.push(listener);
      return () => {
        listeners = listeners.filter(l => l !== listener);
      };
    },
    getCurrentValue: () => currentValue
  };
};

const webSocket = createWebSocket();

const StockPriceSource = {
  subscribe(callback) {
    return webSocket.subscribe(callback);
  },
  getSnapshot(webSocket) {
    return webSocket.getCurrentValue();
  },
  areEqual(prev, next) {
    // Efficiently compare stock prices
    return prev.price === next.price; // Only re-render if the price changes
  }
};

function StockPrice() {
  const stockPrice = useSubscription(StockPriceSource);

  return (
    
Current Stock Price: ${stockPrice.price}
  );
}

export default StockPrice;

            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• เราสร้างการจำลอง WebSocket โดยแทนที่ `wss://your-websocket-api.com` ด้วย endpoint ของ WebSocket API จริงของคุณ การจำลองนี้จัดการการเชื่อมต่อ, การรับข้อความ และการเชื่อมต่อใหม่เมื่อการเชื่อมต่อถูกตัด
• เรากำหนดอ็อบเจ็กต์ StockPriceSource ที่มีเมธอด subscribe, getSnapshot, และ areEqual
• เมธอด subscribe จะลงทะเบียนฟังก์ชัน callback ที่จะถูกเรียกใช้ทุกครั้งที่ได้รับข้อมูลอัปเดตราคาหุ้นใหม่จาก WebSocket
• เมธอด getSnapshot จะคืนค่าราคาหุ้นปัจจุบัน
• เมธอด areEqual จะเปรียบเทียบราคาหุ้นก่อนหน้าและปัจจุบัน และจะคืนค่า false (ซึ่งจะกระตุ้นให้เกิดการ re-render) ก็ต่อเมื่อราคามีการเปลี่ยนแปลง การปรับปรุงประสิทธิภาพนี้ช่วยป้องกันการ re-render ที่ไม่จำเป็นหากฟิลด์อื่นๆ ในอ็อบเจ็กต์ข้อมูลเปลี่ยนแปลงแต่ราคายังคงเท่าเดิม
• คอมโพเนนต์ StockPrice ใช้ experimental_useSubscription เพื่อสมัครรับข้อมูลจาก StockPriceSource และ re-render โดยอัตโนมัติเมื่อราคาหุ้นเปลี่ยนแปลง

สำคัญ: อย่าลืมแทนที่การจำลอง WebSocket และ URL ด้วยรายละเอียด API จริงของคุณ

ตัวอย่างที่ 2: การผสานรวมกับ Redux

คุณสามารถใช้ experimental_useSubscription เพื่อผสานรวมคอมโพเนนต์ React ของคุณกับ Redux store ได้อย่างมีประสิทธิภาพ

            
import React from 'react';
import { experimental_useSubscription as useSubscription } from 'react';
import { useSelector, useDispatch } from 'react-redux';

// Assume you have a Redux store configured (e.g., using Redux Toolkit)
import { increment, decrement } from './counterSlice'; // Example slice actions

const reduxSource = {
  subscribe(callback) {
    // Get the store from the Redux Context using useSelector.
    // This forces a re-render when the context changes and guarantees the subscription is fresh
    useSelector((state) => state);
    const unsubscribe = store.subscribe(callback);
    return unsubscribe;
  },
  getSnapshot(store) {
    return store.getState().counter.value; // Assuming a counter slice with a 'value' field
  },
  areEqual(prev, next) {
    return prev === next; // Only re-render if the counter value changes
  }
};

function Counter() {
  const count = useSubscription(reduxSource);
  const dispatch = useDispatch();

  return (
    

      
Count: {count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
    
  );
}

export default Counter;



            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• เราสมมติว่าคุณได้ตั้งค่า Redux store ไว้แล้ว หากยังไม่ได้ทำ โปรดดูเอกสารของ Redux เพื่อตั้งค่า (เช่น การใช้ Redux Toolkit เพื่อการตั้งค่าที่ง่ายขึ้น)
• เรากำหนดอ็อบเจ็กต์ reduxSource ที่มีเมธอดที่จำเป็น
• ในเมธอด subscribe เราใช้ `useSelector` เพื่อเข้าถึง Redux store ซึ่งจะทำให้เกิดการ re-render ทุกครั้งที่ Redux context เปลี่ยนแปลง ซึ่งสำคัญต่อการรักษาการสมัครรับข้อมูลที่ถูกต้องกับ Redux store นอกจากนี้คุณควรเรียก `store.subscribe(callback)` เพื่อลงทะเบียน callback สำหรับการอัปเดตจาก Redux store จริงๆ
• เมธอด getSnapshot จะคืนค่าตัวนับปัจจุบันจาก Redux store
• เมธอด areEqual จะเปรียบเทียบค่าตัวนับก่อนหน้าและปัจจุบัน และจะกระตุ้นให้เกิดการ re-render ก็ต่อเมื่อค่ามีการเปลี่ยนแปลง
• คอมโพเนนต์ Counter ใช้ experimental_useSubscription เพื่อสมัครรับข้อมูลจาก Redux store และ re-render โดยอัตโนมัติเมื่อค่าตัวนับเปลี่ยนแปลง

หมายเหตุ: ตัวอย่างนี้สมมติว่าคุณมี Redux slice ชื่อ `counter` ที่มีฟิลด์ `value` โปรดปรับเมธอด getSnapshot ให้เหมาะสมเพื่อเข้าถึงข้อมูลที่เกี่ยวข้องจาก Redux store ของคุณ

ตัวอย่างที่ 3: การดึงข้อมูลจาก API ด้วยการ Polling

บางครั้ง คุณจำเป็นต้องเรียก API เป็นระยะๆ (polling) เพื่อรับข้อมูลอัปเดต นี่คือวิธีที่คุณสามารถทำได้ด้วย experimental_useSubscription

            
import React, { useState, useEffect } from 'react';
import { experimental_useSubscription as useSubscription } from 'react';

const API_URL = 'https://api.example.com/data'; // Replace with your API endpoint

const createPollingSource = (url, interval = 5000) => {
  let currentValue = null;
  let listeners = [];
  let timerId = null;

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      currentValue = data;
      listeners.forEach(listener => listener());
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return {
    subscribe(callback) {
      listeners.push(callback);
      if (!timerId) {
        fetchData(); // Initial fetch
        timerId = setInterval(fetchData, interval);
      }
      return () => {
        listeners = listeners.filter(l => l !== callback);
        if (listeners.length === 0 && timerId) {
          clearInterval(timerId);
          timerId = null;
        }
      };
    },
    getSnapshot() {
      return currentValue;
    },
    areEqual(prev, next) {
      // Implement a more robust comparison if needed, e.g., using deep equality checks
      return JSON.stringify(prev) === JSON.stringify(next); // Simple comparison for demonstration
    }
  };
};

const pollingSource = createPollingSource(API_URL);

function DataDisplay() {
  const data = useSubscription(pollingSource);

  if (!data) {
    return 
Loading...
;
  }

  return (
    

      
Data: {JSON.stringify(data)}
    
  );
}

export default DataDisplay;


            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• เราสร้างฟังก์ชัน createPollingSource ที่รับ URL ของ API และช่วงเวลาการ polling เป็นอาร์กิวเมนต์
• ฟังก์ชันนี้ใช้ setInterval เพื่อดึงข้อมูลจาก API เป็นระยะๆ
• เมธอด subscribe จะลงทะเบียนฟังก์ชัน callback ที่จะถูกเรียกใช้ทุกครั้งที่ดึงข้อมูลใหม่มาได้ และจะเริ่มช่วงเวลาการ polling หากยังไม่ได้ทำงาน ฟังก์ชัน unsubscribe ที่คืนค่ากลับมาจะหยุดช่วงเวลาการ polling
• เมธอด getSnapshot จะคืนค่าข้อมูลปัจจุบัน
• เมธอด areEqual จะเปรียบเทียบข้อมูลก่อนหน้าและปัจจุบันโดยใช้ JSON.stringify สำหรับการเปรียบเทียบอย่างง่าย สำหรับโครงสร้างข้อมูลที่ซับซ้อนกว่านี้ ควรพิจารณาใช้ไลบรารีการตรวจสอบความเท่ากันแบบลึก (deep equality check) ที่มีประสิทธิภาพมากกว่า
• คอมโพเนนต์ DataDisplay ใช้ experimental_useSubscription เพื่อสมัครรับข้อมูลจาก polling source และ re-render โดยอัตโนมัติเมื่อมีข้อมูลใหม่

สำคัญ: แทนที่ https://api.example.com/data ด้วย endpoint ของ API จริงของคุณ โปรดระมัดระวังเกี่ยวกับช่วงเวลาการ polling – การ polling ที่บ่อยเกินไปอาจทำให้ API ทำงานหนักเกินไปได้

แนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณา

• การจัดการข้อผิดพลาด: ใช้การจัดการข้อผิดพลาดที่มีประสิทธิภาพในตรรกะการสมัครรับข้อมูลของคุณเพื่อจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นจากแหล่งข้อมูลภายนอกอย่างเหมาะสม และแสดงข้อความแสดงข้อผิดพลาดที่เหมาะสมแก่ผู้ใช้
• การเพิ่มประสิทธิภาพ: ใช้เมธอด areEqual เพื่อเปรียบเทียบค่าข้อมูลอย่างมีประสิทธิภาพและป้องกันการ re-render ที่ไม่จำเป็น พิจารณาใช้เทคนิค memoization เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น เลือกช่วงเวลาการ polling สำหรับ API อย่างรอบคอบเพื่อสร้างสมดุลระหว่างความสดใหม่ของข้อมูลกับภาระของ API
• วงจรชีวิตของการสมัครรับข้อมูล: ตรวจสอบให้แน่ใจว่าคุณยกเลิกการสมัครรับข้อมูลจากแหล่งข้อมูลอย่างถูกต้องเมื่อคอมโพเนนต์ถูก unmount เพื่อป้องกันการรั่วไหลของหน่วยความจำ experimental_useSubscription ช่วยจัดการเรื่องนี้โดยอัตโนมัติ แต่คุณยังคงต้องเขียนตรรกะการยกเลิกการสมัครในอ็อบเจ็กต์ source ของคุณให้ถูกต้อง
• การแปลงข้อมูล: ทำการแปลงหรือปรับข้อมูลให้อยู่ในรูปแบบมาตรฐานภายในเมธอด getSnapshot เพื่อให้แน่ใจว่าข้อมูลอยู่ในรูปแบบที่ต้องการสำหรับคอมโพเนนต์ของคุณ
• การดำเนินการแบบอะซิงโครนัส: จัดการการดำเนินการแบบอะซิงโครนัสอย่างระมัดระวังภายในตรรกะการสมัครรับข้อมูลเพื่อหลีกเลี่ยงสภาวะการแข่งขัน (race conditions) หรือพฤติกรรมที่ไม่คาดคิด
• การทดสอบ: ทดสอบคอมโพเนนต์ของคุณที่ใช้ experimental_useSubscription อย่างละเอียดเพื่อให้แน่ใจว่ามีการสมัครรับข้อมูลและจัดการการอัปเดตอย่างถูกต้อง เขียน unit test สำหรับอ็อบเจ็กต์ source ของคุณเพื่อให้แน่ใจว่าเมธอด `subscribe`, `getSnapshot`, และ `areEqual` ทำงานตามที่คาดไว้
• Server-Side Rendering (SSR): เมื่อใช้ experimental_useSubscription ในแอปพลิเคชันที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ ตรวจสอบให้แน่ใจว่าข้อมูลถูกดึงและจัดลำดับ (serialize) อย่างถูกต้องบนเซิร์ฟเวอร์ ซึ่งอาจต้องมีการจัดการเป็นพิเศษขึ้นอยู่กับแหล่งข้อมูลและเฟรมเวิร์ก SSR ที่คุณใช้ (เช่น Next.js, Gatsby)
• สถานะการทดลอง: โปรดจำไว้ว่า experimental_useSubscription ยังคงเป็น API ที่อยู่ในช่วงทดลอง พฤติกรรมและ API ของมันอาจเปลี่ยนแปลงใน React เวอร์ชันอนาคต เตรียมพร้อมที่จะปรับโค้ดของคุณหากจำเป็น ควรศึกษาเอกสารอย่างเป็นทางการของ React เสมอเพื่อรับข้อมูลล่าสุด
• ทางเลือกอื่น: สำรวจแนวทางอื่นในการจัดการการสมัครรับข้อมูล เช่น การใช้ไลบรารีการจัดการสถานะที่มีอยู่หรือ custom hooks หาก experimental_useSubscription ไม่ตรงตามความต้องการเฉพาะของคุณ
• สถานะส่วนกลาง (Global State): พิจารณาใช้โซลูชันการจัดการสถานะส่วนกลาง (เช่น Redux, Zustand, หรือ Jotai) สำหรับข้อมูลที่ใช้ร่วมกันในหลายคอมโพเนนต์หรือที่ต้องคงอยู่ตลอดการนำทางในหน้าต่างๆ จากนั้นสามารถใช้ experimental_useSubscription เพื่อเชื่อมต่อคอมโพเนนต์ของคุณกับสถานะส่วนกลางได้

สรุป

experimental_useSubscription เป็นส่วนเสริมที่มีคุณค่าสำหรับระบบนิเวศของ React ซึ่งมอบวิธีที่มีประสิทธิภาพและเป็นมาตรฐานมากขึ้นในการจัดการการสมัครรับข้อมูลภายนอก ด้วยความเข้าใจในหลักการและการนำแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ไปใช้ คุณจะสามารถผสานรวม experimental_useSubscription เข้ากับโปรเจกต์ของคุณและสร้างแอปพลิเคชัน React ที่มีเสถียรภาพและประสิทธิภาพสูงขึ้นได้ เนื่องจากยังอยู่ในช่วงทดลอง อย่าลืมติดตาม React เวอร์ชันในอนาคตสำหรับการอัปเดตหรือการเปลี่ยนแปลงใดๆ ของ API นี้